<#include "/common/_layout.html">
<#assign pageJavascript>
<script type="text/javascript" src="/assets/echarts/echarts.min.js"></script>
<script type="text/javascript">
var chart1 = echarts.init(document.getElementById('container1'));
var chart2 = echarts.init(document.getElementById('container2'));
var showchart1 = function(year,pid){
	$.post('/admin/statis/deviceaddyear', {year:year,pid:pid}, function(d) {
		var option = {
			title: {text: '激活设备（年）',subtext:d.name},tooltip:{},
            xAxis: {data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]},
			yAxis: {axisLabel: {formatter: '{value}'}},
            series: [{name: d.name,type: 'bar', data: d.data}]
	    };
		chart1.setOption(option);
	});
};
var showchart2 = function(month,pid){
	$.post('/admin/statis/deviceaddyear', {month:month,pid:pid}, function(d) {
			var option = {
				title: {text: '激活设备（月）',subtext:d.name},tooltip:{},
	            xAxis: {data: d.axis},
	            yAxis: {axisLabel: {formatter: '{value}'}},
	            series: [{name: d.name,type: 'bar', data: d.data}],
	            color:['#61a0a8']
		    };
			chart2.setOption(option);
	});
};
$(function(){
	$("#year").change(function(){
		showchart1($(this).val(),$("#pid").val());
		showchart2($(this).val()+$("#month").val(),$("#pid").val());
	});
	$("#month").change(function(){
		showchart2($("#year").val()+$(this).val(),$("#pid").val());
	});
	$("#pid").change(function(){
		showchart1($("#year").val(),$("#pid").val());
		showchart2($("#year").val()+$("#month").val(),$("#pid").val());
	});
	$("#month").val("${currMonth!'01'}");
	$("#year").change();
});
</script>
</#assign>
<#assign pageCss>
<style type="text/css">
</style>
</#assign>
<@layout pageTitle="激活设备统计" pageJavascript=pageJavascript pageCss=pageCss>		
<#include "/admin/statis/_menu.html">
<div class="panel panel-default">
  <div class="panel-body filter">
	<div class="form-inline">
		<label for="pid">产品</label> 
		<select class="form-control" id="pid">
    		<#if plist??>
    		<#list plist as data>
    		<option value="${(data.id)!}">${(data.pname)!}</option>
    		</#list>
    		</#if>
		</select>
	  	<label for="year">统计年</label> 
		<select class="form-control" id="year">
	   		<#if ylist??>
	   		<#list ylist as data>
	   		<option value="${data}">${data}</option>
	   		</#list>
	   		</#if>
		</select>
	  	<label for="month">统计月份</label> 
		<select class="form-control" id="month">
	   		<option value="01">一月</option><option value="02">二月</option>
	   		<option value="03">三月</option><option value="04">四月</option>
	   		<option value="05">五月</option><option value="06">六月</option>
	   		<option value="07">七月</option><option value="08">八月</option>
	   		<option value="09">九月</option><option value="10">十月</option>
	   		<option value="11">十一月</option><option value="12">十二月</option>
		</select>
	</div>
  </div>
</div>
<div id="container1" class="col-xs-6" style="height:600px"></div>
<div id="container2" class="col-xs-6" style="height:600px"></div>
</@layout>